<template>
  <el-dropdown class="theme-picker" @command="themeChange">
    <span
      class="theme-picker__link"
      :style="{
        height: '48px',
        lineHeight: '48px'
      }"
    >
      <i class="iconfont icon-huanfu1" :class="`icon-theme-${selected}`" />
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="item in data" :key="item.code" :command="item.code">
        <i class="iconfont icon-fangxing" :class="`icon-theme-${item.code}`" />
        {{item.name}}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script lang="ts">
import { Vue, Component, Prop, Emit } from "vue-property-decorator";
import { namespace } from "vuex-class";

@Component
export default class ThemePicker extends Vue {
  @Prop({ required: true }) public data!: any[];
  @Prop(Boolean) public collapse!: string;
  @Prop() public selected!: string;

  @Emit()
  public themeChange(val: string) {}
}
</script>

<style lang="less" scoped>
@import url("../assets/less/variables.less");

.theme-picker {
  &:hover &__link {
    background-color: #f5f7fa;
  }
  &__link {
    color: @text_color_lv1;
    cursor: pointer;
    display: block;
    padding: 0 15px;
  }
}
</style>
